<template>
  <view :class="$style.linkage_container">
    <view :class="$style.title">{{ titleName }}</view>

    <view :class="$style.statistic" class="flex justify-center items-baseline">
      <view :class="$style.img_group"><img :class="$style.img" :src="yaInfo.dwyaTbdz" alt="" srcset="">单位预览</view>
      <view :class="$style.img_group"><img :class="$style.img" :src="yaInfo.lxyaTbdz" alt="" srcset="">类型预案</view>
    </view>
    <view :class="$style.title_text">推荐案例</view>
    <view :class="$style.content">
      <view v-for="(item, index) in yaInfo.tjalList" :key="index" class="flex justify-between"
        style="margin-bottom: 15rpx;">
        <view :class="$style.power_info" class="flex">
          <image :src="item.tjalTbdz" mode="widthFix" style="width: 40rpx;" />
          <view :class="$style.organization">{{ item.alms }}</view>
          <!-- <view :class="$style.contact_name">{{item.cjsj}}</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang='ts'>
import { ref } from "vue";

const titleName = ref<string>("预案&案例");
interface Props {
  yaInfo: any
};
const {
  yaInfo = {},
} = defineProps<Props>();


</script>

<style lang='less' module>
.linkage_container {
  width: calc(100% - 60rpx);
  min-height: 350rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .statistic {
    font-weight: bold;
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;

    .img_group {
      margin: 30rpx 0;
      display: flex;
      width: 50%;
      line-height: 60rpx;
      justify-content: center;

      .img {
        width: 60rpx;
        height: 60rpx;
        margin-right: 10rpx;
      }
    }

    .number {
      font-size: 60rpx;
    }

    .text {
      font-size: 26rpx;
    }
  }

  .title_text {
    font-size: 24rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    margin: 10rpx 0;
  }

  .content {
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;

    .organization {
      margin-left: 15rpx;
      width: 600rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .contact_name {
      margin-left: 15rpx;
    }

    .state {
      margin-left: 20rpx;
      background: #00d195;
      border-radius: 8rpx;
      padding: 5rpx 10rpx;
      font-size: 22rpx;
      color: #ffffff;
    }
  }
}
</style>
